<template>
    <div class="login_container">
        <!--登录盒子-->
        <div class="login_box">
            <!--图片logo区域-->
            <div class="avatar_box">
                <img src="@/assets/images/logo.png">
            </div>
            <!--登录表单区域  :rules="rules"  表单校验对象 -->
            <el-form ref="formRef" class="login_form" :model="form" :rules="formRules">
                <!--用户名  prop 指定验证规则-->
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" type="password" v-model="form.password"
                              placeholder="请输入密码"></el-input>
                </el-form-item>
                <!--验证码-->
                <el-form-item prop="code">
                    <el-input prefix-icon="el-icon-key" v-model="form.code" placeholder="点击图片切换验证码"
                              style="width: 300px; margin-right: 10px"></el-input>
                    <img :src="captchaData" alt="" width="100" height="40" @click="changeCaptcha" style="float: right;">
                </el-form-item>
                <!--按钮区域-->
                <el-form-item>
                    <el-button type="primary" class="btn" @click="formSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import getCaptcha from "@/api/captcha";
import * as user from '@/api/user'

export default {
    name: "Login",
    data() {
        return {
            captchaData: '',
            form: {
                username: 'admin',
                password: '111111',
                code: '',
                uuid: ''
            },
            formRules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 15, message: '长度在6 到 15 个字符', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        // 切换验证码图片
        changeCaptcha() {
            getCaptcha().then((res) => {
                if (res.code == 0) {
                    let {img, uuid} = res.data
                    this.captchaData = 'data:image/png;base64,' + img
                    this.form.uuid = uuid
                }
            })
        },
        formSubmit() {
            // 发送异步请求   0
          this.$refs.formRef.validate((val)=>{
              if (val){
                  user.login(this.form)
                      .then((res) => {
                          if (res.code == 0) {
                              let {token,nickName} = res.data
                              sessionStorage.setItem("token",token)
                              sessionStorage.setItem("nickName",nickName)
                              this.$notify({
                                  message: res.message,
                                  type: "success",
                                  onClose: () => {
                                      this.$router.push({name: 'index'}).catch(err=>{
                                          console.log(err)})
                                  }
                              })
                          }
                      })
              }else {
                  this.$message.warning('请填写完整信息')
              }
          })

        }
    },
    created() {
        getCaptcha().then((res) => {
            if (res.code == 0) {
                let {img, uuid} = res.data
                this.captchaData = 'data:image/png;base64,' + img
                this.form.uuid = uuid
            }
        })
    }
}
</script>

<style scoped>

.login_container {
    background-color: rgb(26, 160, 148);
    height: 100vh;
}

.login_box {
    width: 450px;
    height: 380px;
    background-color: #fff;
    border-radius: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px #fff;
}

.login_box > .avatar_box {
    height: 70px;
    width: 70px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 2px 2px 20px #2b4b6b;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
}

.avatar_box > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(1.3);
}

.avatar_box:hover {
    transform: translate(-50%, -50%) rotate(360deg);
    transition: transform 0.5s linear;
    cursor: pointer;
}

.btn {
    width: 100%;
}

.login_form {
    position: absolute;
    bottom: 30px;
    border-bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
}
</style>